﻿{extend name="../template/master.html" /}
{block name="content"}


<div class="wrapper w980 bc clearfix">

    <script src="/static/index/js/qq.js" type="text/javascript"></script>
    <script src="/static/index/js/login.js"
            type="text/javascript"></script>

    <link rel="stylesheet" type="text/css"
          href="/static/index/css/reset.css">
    <link rel="stylesheet" type="text/css"
          href="/static/index/css/register.css">

    <script language="javascript">
        $(function () {
            $("#phone_verif_div").show();
        })
        function CharMode(iN) {
            if (iN >= 48 && iN <= 57) //数字
                return 1;
            if (iN >= 65 && iN <= 90) //大写字母
                return 2;
            if (iN >= 97 && iN <= 122) //小写
                return 4;
            else
                return 8; //特殊字符
        }
        //bitTotal函数
        //计算出当前密码当中一共有多少种模式
        function bitTotal(num) {
            modes = 0;
            for (i = 0; i < 4; i++) {
                if (num & 1) modes++;
                num >>>= 1;
            }
            return modes;
        }
        //checkStrong函数
        //返回密码的强度级别
        function checkStrong(sPW) {
            if (sPW.length <= 4)
                return 0; //密码太短
            Modes = 0;
            for (i = 0; i < sPW.length; i++) {
                //测试每一个字符的类别并统计一共有多少种模式.
                Modes |= CharMode(sPW.charCodeAt(i));
            }
            return bitTotal(Modes);
        }
        //pwStrength函数
        //当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色
        function pwStrength(pwd) {
            var imgSrc = '';
            if (pwd == null || pwd == '') {
                $("#pwdbottom").attr('class', 'div3');
            }
            else {
                var S_level = checkStrong(pwd);
                switch (S_level) {
                    case 0:
                        $("#pwdbottom").attr('class', 'div3');
                    case 1:
                        $("#pwdbottom").attr('class', 'div3');
                        break;
                    case 2:
                        $("#pwdbottom").attr('class', 'div2');
                        break;
                    default:
                        $("#pwdbottom").attr('class', 'div1');
                }

            }
            return;
        }
        //用于获取短信验证码
        function phone_verif() {
            if ($("#m_mobile").val() == "") {
                alert("请输入常用手机号");
            } else {
                var tel = $('#m_mobile').val();
                var reg = /^(13[0-9]|14[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$/;
                if (!reg.test(tel)) {
                    alert("手机格式错误");
                    return false;
                }

                var code = $("#dr_checknumber").val();
                if ("" == code) {
                    alert('请输入验证码');
                    return false;
                }
                $.post('/?app_act=user/index/send_sms_new', 'app_fmt=json&type=1&code=' + code + '&mobile=' + tel, function (s) {
                    if (s['status'] < 0) {
                        alert(s['message']);
                    } else {
                        alert(s['message']);
                    }
                }, 'json');
            }

        }
    </script>
    <div class="content-box">
        <div class="content" style="background-color: #fff;">
            <span><b>欢迎注册</b></span>
            <div class="content-left">



                <div class="email">
                    <label><span>*</span>用户名：</label>
                    <input class="required placeholder" name="username" id="reg_user" type="text"
                           placeholder="建议用邮箱注册"/>
                </div>
                <div class="password">
                    <label><span>*</span>设置密码：</label>
                    <input id="reg_pwd1" type="password"  size="20" maxlength="20"
                           placeholder="6-20个字符,建议由字母,数字组合" maxlength="16" onkeyup="pwStrength(this.value) "
                           onblur="pwStrength(this.value)"
                    />
                    <!--<span class="error-span aa"></span>-->
                </div>
                <div class="pwdbottom">
                    <!--<div class="div1"></div>-->
                    <!--<div class="div2"></div>-->
                    <div id="pwdbottom" class="div3"></div>
                </div>
                <div class="maketure">
                    <label><span>*</span>确认密码：</label>
                    <input id="reg_pwd2" type="password" name="reg_pwd2" placeholder="请再次输入密码"/>
                </div>


                <div class="agree">
                    <div class="checkbox-container"><input id="t_agreement_flg" type="checkbox"></input></div>
                    <span>我已阅读并同意</span>
                    <p>《特步服务条款》</p>
                </div>
                <button class="ture" onclick="submituser();"><b>立即注册</b></button>
            </div>
            <div class="content-right content-leftBorder">
                <p>已经有特步账号?</p>
                <button onclick="location.href='/index/user/login/';"><b>立即登录</b></button>
                <div></div>
                <span>你也可以使用下列账号登录:</span>
                <div class="other">
                    <div class="iconqq" onclick="_xUnionScript.toQzoneLogin();">
                        <img src="/static/index/images/qq.png">
                        <div>QQ</div>
                    </div>
                    <!--
					<div class="iconwb" onclick="_xUnionScript.toSinaLogin();">
						<img src="/static/index/images/weibo.png">
						<div>微博</div>
					</div>
					<div class="iconwx" onclick="_xUnionScript.toWeixinLogin();">
						<img src="/static/index/images/weixin.png">
						<div>微信</div>
					</div>
                    -->
                    <div class="icontb" onclick="_xUnionScript.toTaobaoLogin();">
                        <img src="/static/index/images/taobao.png">
                        <div>淘宝</div>
                    </div>
                    <!--
					<div class="iconrr" onclick="_xUnionScript.toRenrenLogin();">
						<img src="/static/index/images/renren.png">
						<div>人人</div>
					</div>
                    -->
                    <div class="icontb" onclick="_xUnionScript.toAliPayLogin();">
                        <img src="/static/index/images/zhifubao.png">
                        <div>支付宝</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/static/index/layer/layer.js"></script>
    <script>
        function submituser() {
            var data = {
                user: $('#reg_user').val(),
                pw: $('#reg_pwd1').val(),
                c_pw: $('#reg_pwd2').val(),
            };
            $.post("{:url('index/user/registerajax')}",data,function(res){
                layer.tips(res.message, '#reg_user');
            },'json')
        };
        //tips层




    </script>
</div>
{/block}



